<template>
  <div class="collection">
    <navbar title="收藏/历史" @back="back"></navbar>
    <van-tabs v-model="active">
      <van-tab title="我的收藏">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="list"
            v-for="(item, index) in collectionList"
            :key="index"
          >
            <div class="title" @click="toDetail(item)">
              <h4>{{ item.title }}</h4>
              <van-grid :border="false" :column-num="3">
                <van-grid-item
                  v-for="(myitem, myindex) in item.cover.images"
                  :key="myindex"
                >
                  <van-image :src="myitem" />
                </van-grid-item>
              </van-grid>
              <div class="msgbox">
                <div class="item">
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.pubdate | findTime }}</span>
                </div>
              </div>
            </div>
            <div class="grid">
              <van-grid :column-num="3" direction="horizontal">
                <van-grid-item icon="comment-o" text="评论" />
                <van-grid-item icon="good-job-o" text="点赞" />
                <van-grid-item icon="star-o" text="收藏" />
              </van-grid>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="我的历史">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="list" v-for="(item, index) in historiesList" :key="index">
            <div class="title" @click="toDetail(item)">
              <h4>{{ item.title }}</h4>
              <van-grid :border="false" :column-num="3">
                <van-grid-item
                  v-for="(myitem, myindex) in item.cover.images"
                  :key="myindex"
                >
                  <van-image :src="myitem" />
                </van-grid-item>
              </van-grid>
              <div class="msgbox">
                <div class="item">
                  <span>{{ item.aut_name }}</span>
                  <span>{{ item.pubdate | findTime }}</span>
                </div>
              </div>
            </div>
            <div class="grid">
              <van-grid :column-num="3" direction="horizontal">
                <van-grid-item icon="comment-o" text="评论" />
                <van-grid-item icon="good-job-o" text="点赞" />
                <van-grid-item icon="star-o" text="收藏" />
              </van-grid>
            </div>
          </div> </van-list
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getCollections, getHistoriesList } from '../../../api/user'
export default {
  name: 'collection',
  data () {
    return {
      active: 0,
      // 页面传递过来的值
      //   数据列表
      collectionList: [],
      finished: false,
      loading: false,
      total_count: 0,
      page: 0,
      page1: 0,
      historiesList: []
    }
  },
  methods: {
    // 点击跳转详情页
    toDetail (item) {
      // console.log(item.art_id)
      this.$router.push(`/detail/${item.art_id}`)
    },
    // 下拉刷新
    async onLoad () {
      console.log('onLoad')
      if (this.active === 0) {
        this.collectionList = []
        this.page += 1
        console.log(111)
        const res = await getCollections({
          page: this.page
        })
        // console.log(res)
        const arr = res.data.data.results
        this.collectionList.push(...arr)
        this.total_count = res.data.data.total_count
        this.loading = false
        if (this.collectionList.length === this.total_count) {
          this.finished = true
        }
      } else if (this.active === 1) {
        this.page1 += 1
        this.historiesList = []
        console.log(222)
        const res = await getHistoriesList({
          page: this.page1
        })
        const arr = res.data.data.results
        this.historiesList.push(...arr)
        this.total_count = res.data.data.total_count
        this.loading = false
        if (this.historiesList.length === this.total_count) {
          this.finished = true
        }
      }
    },
    //   点击返回
    back () {
      this.$router.back()
    }
  },
  created () {
    // console.log(this.$route.params.active)
    this.active = +this.$route.params.active
    console.log(this.active)
  }
}
</script>

<style lang="less" scoped>
.collection {
  height: 100vh;
  background-color: #f5f7f9;
  .list {
    background-color: #fff;
    margin-top: 5px;
    .title {
      h4 {
        padding: 15px;
        font-size: 0.37333rem;
        line-height: 0.64rem;
      }
      .van-grid {
        display: flex;
        /deep/ .van-image {
          flex: 1;
        }
      }
      .msgbox {
        padding: 10px 15px;
        color: #323233;
        font-size: 0.37333rem;
        line-height: 0.64rem;
        span {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
